<!--
 * 部门管理--新增编辑部门
 * @author: hexiaozhen
 * @since: 2023-09-27
 * addEditRole.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    :title="rowData.type === 'add' ? '新增部门' : '编辑部门'"
    title-align="start"
    width="750px"
    draggable
    :mask-closable="false"
    @cancel="handleCancel"
  >
    <TableForm
      ref="formAndTableRef"
      :rules="rules"
      :showMore="false"
      :rowspan="12"
      :formItems="formItems"
      :formData="formData"
      class="tableForm"
      @search="search"
    ></TableForm>
    <template #footer>
      <footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </footer>
    </template>
  </a-modal>
</template>

<script setup>
import { reactive, ref, onMounted, computed, toRefs } from 'vue'
import TableForm from '@/components/tableForm/index.vue'
import system from '@/api/modules/system'
import { Message } from '@arco-design/web-vue'
import { validatePhone, validateEmail } from '@/utils/validate'
const props = defineProps({
  // 表单json配置项
  visible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
    default: () => {
      return {
        type: '',
      }
    },
  },
})
const { visible, rowData } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
const formAndTableRef = ref() // 表单
visibleModal.value = visible.value
// 确定
const handleOk = () => {
  formAndTableRef.value.$refs.form.validate((valid) => {
    if (!valid) {
      const api = rowData.value.type === 'add' ? 'addDept' : 'editDept'
      system[api]({ ...formData }).then((res) => {
        visibleModal.value = false
        Message.success(res.msg)
        emit('submit')
        emit('update:visible', false)
      })
    }
  })
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}

// 表单配置
const formItems = reactive([
  {
    name: 'parentId',
    label: '上级部门',
    type: 'a-tree-select',
    data: [],
    span: 24,
    fieldNames: {
      key: 'deptId',
      title: 'deptName',
      children: 'children',
    },
    disabled: false,
  },
  { name: 'fullName', label: '部门全称', type: 'a-input', span: 24 },
  { name: 'deptName', label: '部门名称', type: 'a-input' },
  { name: 'deptCode', label: '部门编码', type: 'a-input' },
  { name: 'deptType', label: '部门类型', type: 'a-select', options: [] },
  { name: 'orderNum', label: '显示排序', type: 'a-input-number' },
  { name: 'leader', label: '负责人', type: 'a-input' },
  { name: 'phone', label: '联系电话', type: 'a-input' },
  { name: 'email', label: '邮箱', type: 'a-input' },
  { name: 'status', label: '部门状态', type: 'a-radio', options: [] },
])
const initFormData = reactive({
  parentId: '',
  fullName: '',
  deptName: '',
  deptCode: '',
  deptType: '',
  orderNum: null,
  leader: '',
  phone: '',
  email: '',
  status: '0',
})
const indexProp = computed(() => {
  const indexObj = {}
  formItems.forEach((item, index) => {
    indexObj[item.name] = index
  })
  return indexObj
})
let formData = {}
if (rowData.value.type === 'edit') {
  formData = reactive({ ...initFormData, ...rowData.value })
  if (rowData.value.parentId === '0') {
    formItems[indexProp.value['parentId']].disabled = true
  }
  delete formData.type
} else {
  formData = reactive({ ...initFormData })
  formData.parentId = rowData.value.deptId
}
const rules = reactive({
  parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
  fullName: [{ required: true, message: '部门全称不能为空', trigger: 'blur' }],
  deptName: [{ required: true, message: '部门名称不能为空', trigger: 'blur' }],
  deptCode: [{ required: true, message: '部门编号不能为空', trigger: 'blur' }],
  deptType: [{ required: true, message: '部门类型不能为空', trigger: 'blur' }],
  orderNum: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
  phone: [
    {
      maxlength: '11',
      validator: validatePhone,
      message: `请输入正确格式的联系电话!`,
      trigger: ['blur'],
    },
  ],
  email: [
    {
      validator: validateEmail,
      message: `请输入正确格式的邮箱!`,
      trigger: ['blur'],
    },
  ],
})

//  数据字典
const getOption = () => {
  const param = { dictTypes: 'sys_dept_type,sys_normal_disable' }
  system.getDicts(param).then((res) => {
    // 部门类型
    formItems[indexProp.value['deptType']].options = res.data.sys_dept_type.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
    // 部门状态
    formItems[indexProp.value['status']].options = res.data.sys_normal_disable.map((it) => ({
      label: it.dictLabel,
      value: it.dictValue,
    }))
  })
}
// 获取表格数据
const getTableList = (val = '') => {
  const param = { deptName: val }
  system.getDeptList(param).then((res) => {
    formItems[indexProp.value['parentId']].data = res.data
  })
}
const search = (val) => {
  getTableList(val)
}
onMounted(() => {
  getOption()
  getTableList()
})
</script>
